<template>
  <div id="app">
    <button @click="show=!show">开关</button>
    <transition>
      <div id="animated" v-if="show"></div>
    </transition>
  </div>
</template>
<script>
export default {
  name:'Animation',
  data:()=>({
    show:true
  })
}
</script>
<style lang="less">
#animated{
  width:100px;
  height:100px;
  background-color: red;
}
.v-enter-active,.v-leave-active{
  transition: opacity 2s;;
}
//进入后和离开前一样
.v-leave,.v-enter-to{
  opacity: 1;
}
//进入前和离开后一样
.v-enter,.v-leave-to{
  opacity: 0;
}

</style>
